<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>英语单词消消乐</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 20px;
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }
        
        .header {
            background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
            color: white;
            padding: 20px;
            text-align: center;
        }
        
        .title {
            font-size: 2.5rem;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
        }
        
        .stats {
            display: flex;
            justify-content: center;
            gap: 30px;
            font-size: 1.2rem;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .game-area {
            padding: 30px;
        }
        
        .controls {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 30px;
        }
        
        .btn {
            padding: 12px 24px;
            font-size: 1rem;
            border: none;
            border-radius: 25px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: bold;
        }
        
        .btn-primary {
            background: linear-gradient(45deg, #ff6b6b, #ee5a52);
            color: white;
        }
        
        .btn-secondary {
            background: linear-gradient(45deg, #4ecdc4, #44a08d);
            color: white;
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        .game-board {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            margin-bottom: 30px;
        }
        
        .word-column {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 20px;
            min-height: 400px;
        }
        
        .column-title {
            text-align: center;
            font-size: 1.3rem;
            font-weight: bold;
            margin-bottom: 20px;
            color: #333;
        }
        
        .word-item {
            background: white;
            margin: 8px 0;
            padding: 15px;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 2px solid transparent;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        
        .word-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        
        .word-item.selected {
            border-color: #ff6b6b;
            background: linear-gradient(45deg, #ffe6e6, #fff0f0);
        }
        
        .word-item.matched {
            background: linear-gradient(45deg, #d4edda, #c3e6cb);
            border-color: #28a745;
            opacity: 0.7;
            cursor: not-allowed;
        }
        
        .word-item.wrong {
            background: linear-gradient(45deg, #f8d7da, #f5c6cb);
            border-color: #dc3545;
            animation: shake 0.5s ease-in-out;
        }
        
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            25% { transform: translateX(-5px); }
            75% { transform: translateX(5px); }
        }
        
        .english-word {
            font-weight: bold;
            font-size: 1.1rem;
            color: #2c3e50;
        }
        
        .pronunciation {
            color: #7f8c8d;
            font-size: 0.9rem;
            margin-top: 3px;
        }
        
        .chinese-meaning {
            font-weight: bold;
            font-size: 1.1rem;
            color: #2c3e50;
        }
        
        .part-of-speech {
            color: #e74c3c;
            font-size: 0.9rem;
            margin-top: 3px;
        }
        
        .progress {
            background: #e9ecef;
            border-radius: 10px;
            height: 20px;
            margin-bottom: 20px;
            overflow: hidden;
        }
        
        .progress-bar {
            background: linear-gradient(45deg, #28a745, #20c997);
            height: 100%;
            transition: width 0.3s ease;
            border-radius: 10px;
        }
        
        .modal {
            display: none;
            position: fixed;
            z-index: 1000;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
        }
        
        .modal-content {
            background-color: #fefefe;
            margin: 5% auto;
            padding: 30px;
            border-radius: 20px;
            width: 90%;
            max-width: 600px;
            max-height: 80vh;
            overflow-y: auto;
        }
        
        .modal-header {
            text-align: center;
            margin-bottom: 20px;
        }
        
        .modal-title {
            font-size: 1.8rem;
            color: #333;
            margin-bottom: 10px;
        }
        
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            line-height: 1;
        }
        
        .close:hover {
            color: #000;
        }
        
        .wrong-word {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
            border-left: 4px solid #dc3545;
        }
        
        .wrong-word-header {
            font-weight: bold;
            color: #dc3545;
            margin-bottom: 8px;
        }
        
        .example-sentence {
            color: #666;
            font-style: italic;
            margin-top: 5px;
            font-size: 0.95rem;
        }
        
        .leaderboard {
            background: #f8f9fa;
            border-radius: 15px;
            padding: 20px;
            margin-top: 20px;
        }
        
        .leaderboard-title {
            text-align: center;
            font-size: 1.3rem;
            margin-bottom: 15px;
            color: #333;
        }
        
        .score-item {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid #dee2e6;
        }
        
        .celebration {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 3rem;
            z-index: 999;
            pointer-events: none;
            opacity: 0;
            animation: celebrate 1s ease-out;
        }
        
        @keyframes celebrate {
            0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
            50% { opacity: 1; transform: translate(-50%, -50%) scale(1.2); }
            100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
        }
        
        @media (max-width: 768px) {
            .game-board {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            
            .stats {
                flex-direction: column;
                gap: 10px;
            }
            
            .title {
                font-size: 2rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <div class="title">🎮 英语单词消消乐</div>
            <div class="stats">
                <div class="stat-item">
                    <span>⭐ 分数：</span>
                    <span id="score">0</span>
                </div>
                <div class="stat-item">
                    <span>✅ 正确：</span>
                    <span id="correct">0</span>
                </div>
                <div class="stat-item">
                    <span>❌ 错误：</span>
                    <span id="wrong">0</span>
                </div>
                <div class="stat-item">
                    <span>⏱️ 时间：</span>
                    <span id="timer">00:00</span>
                </div>
            </div>
        </div>
        
        <div class="game-area">
            <div class="controls">
                <button class="btn btn-primary" onclick="startNewGame()">🚀 开始新游戏</button>
                <button class="btn btn-secondary" onclick="showLeaderboard()">🏆 排行榜</button>
                <button class="btn btn-secondary" onclick="showWrongWords()">📚 错题回顾</button>
            </div>
            
            <div class="progress">
                <div class="progress-bar" id="progressBar"></div>
            </div>
            
            <div class="game-board">
                <div class="word-column">
                    <div class="column-title">🇬🇧 英语单词 (点击选择)</div>
                    <div id="englishWords"></div>
                </div>
                <div class="word-column">
                    <div class="column-title">🇨🇳 中文释义 (点击匹配)</div>
                    <div id="chineseWords"></div>
                </div>
            </div>
            
            <div class="leaderboard" id="leaderboardSection" style="display: none;">
                <div class="leaderboard-title">🏆 历史最佳成绩</div>
                <div id="leaderboardList"></div>
            </div>
        </div>
    </div>
    
    <!-- 错题回顾模态框 -->
    <div id="wrongWordsModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <span class="close" onclick="closeModal()">&times;</span>
                <div class="modal-title">📚 错题回顾与学习</div>
            </div>
            <div id="wrongWordsList"></div>
        </div>
    </div>
    
    <!-- 游戏结束模态框 -->
    <div id="gameOverModal" class="modal">
        <div class="modal-content">
            <div class="modal-header">
                <span class="close" onclick="closeModal()">&times;</span>
                <div class="modal-title">🎉 游戏完成！</div>
            </div>
            <div id="gameOverContent"></div>
        </div>
    </div>

    <script>
        // 词汇数据库
        const wordsDatabase = [
            {
                english: "Jenkins",
                pronunciation: "/ˈdʒɛnkɪnz/",
                chinese: "詹金斯",
                partOfSpeech: "n.",
                example: "Jenkins is a popular automation server for software development."
            },
            {
                english: "Canary Islands",
                pronunciation: "/kəˈnɛəri ˈaɪləndz/",
                chinese: "加那利群岛",
                partOfSpeech: "n.",
                example: "The Canary Islands are located off the coast of Africa."
            },
            {
                english: "rivalry",
                pronunciation: "/ˈraɪvəlri/",
                chinese: "竞争",
                partOfSpeech: "n.",
                example: "There's a fierce rivalry between the two teams."
            },
            {
                english: "partition",
                pronunciation: "/pɑːˈtɪʃən/",
                chinese: "分割",
                partOfSpeech: "n./v.",
                example: "They decided to partition the room with a screen."
            },
            {
                english: "loop",
                pronunciation: "/luːp/",
                chinese: "循环",
                partOfSpeech: "n./v.",
                example: "The program got stuck in an infinite loop."
            },
            {
                english: "plaza",
                pronunciation: "/ˈplɑːzə/",
                chinese: "广场",
                partOfSpeech: "n.",
                example: "We met at the town plaza for the festival."
            },
            {
                english: "overstate",
                pronunciation: "/ˌoʊvərˈsteɪt/",
                chinese: "夸大",
                partOfSpeech: "v.",
                example: "Don't overstate the importance of this meeting."
            },
            {
                english: "prophet",
                pronunciation: "/ˈprɑːfɪt/",
                chinese: "先知",
                partOfSpeech: "n.",
                example: "The ancient prophet predicted the future."
            },
            {
                english: "testify",
                pronunciation: "/ˈtɛstɪˌfaɪ/",
                chinese: "作证",
                partOfSpeech: "v.",
                example: "She will testify as a witness in court."
            },
            {
                english: "testimony",
                pronunciation: "/ˈtɛstɪmoʊni/",
                chinese: "证词",
                partOfSpeech: "n.",
                example: "His testimony was crucial to the case."
            },
            {
                english: "recount",
                pronunciation: "/rɪˈkaʊnt/",
                chinese: "重新计算",
                partOfSpeech: "v./n.",
                example: "They demanded a recount of the votes."
            },
            {
                english: "retention",
                pronunciation: "/rɪˈtɛnʃən/",
                chinese: "保持",
                partOfSpeech: "n.",
                example: "Student retention is important for universities."
            },
            {
                english: "retrieval",
                pronunciation: "/rɪˈtriːvəl/",
                chinese: "检索",
                partOfSpeech: "n.",
                example: "Data retrieval from the server was successful."
            },
            {
                english: "assault",
                pronunciation: "/əˈsɔːlt/",
                chinese: "攻击",
                partOfSpeech: "n./v.",
                example: "The assault on the fortress failed."
            },
            {
                english: "rape",
                pronunciation: "/reɪp/",
                chinese: "强奸",
                partOfSpeech: "n./v.",
                example: "Rape is a serious crime with severe penalties."
            },
            {
                english: "repel",
                pronunciation: "/rɪˈpɛl/",
                chinese: "击退",
                partOfSpeech: "v.",
                example: "The army managed to repel the enemy attack."
            },
            {
                english: "empirical",
                pronunciation: "/ɪmˈpɪrɪkəl/",
                chinese: "经验的",
                partOfSpeech: "adj.",
                example: "The study is based on empirical evidence."
            },
            {
                english: "obscure",
                pronunciation: "/əbˈskjʊr/",
                chinese: "模糊的",
                partOfSpeech: "adj./v.",
                example: "The meaning of the text is quite obscure."
            },
            {
                english: "incidence",
                pronunciation: "/ˈɪnsɪdəns/",
                chinese: "发生率",
                partOfSpeech: "n.",
                example: "The incidence of flu increases in winter."
            },
            {
                english: "periodic",
                pronunciation: "/ˌpɪriˈɑːdɪk/",
                chinese: "周期的",
                partOfSpeech: "adj.",
                example: "The machine requires periodic maintenance."
            },
            {
                english: "casino",
                pronunciation: "/kəˈsiːnoʊ/",
                chinese: "赌场",
                partOfSpeech: "n.",
                example: "They spent the evening at the casino."
            },
            {
                english: "slot",
                pronunciation: "/slɑːt/",
                chinese: "狭缝",
                partOfSpeech: "n.",
                example: "Insert the coin into the slot."
            },
            {
                english: "threshold",
                pronunciation: "/ˈθrɛʃˌhoʊld/",
                chinese: "门槛",
                partOfSpeech: "n.",
                example: "We're on the threshold of a new era."
            },
            {
                english: "trillion",
                pronunciation: "/ˈtrɪljən/",
                chinese: "万亿",
                partOfSpeech: "num.",
                example: "The national debt reached one trillion dollars."
            },
            {
                english: "erroneous",
                pronunciation: "/ɪˈroʊniəs/",
                chinese: "错误的",
                partOfSpeech: "adj.",
                example: "The report contains erroneous information."
            },
            {
                english: "decay",
                pronunciation: "/dɪˈkeɪ/",
                chinese: "衰退",
                partOfSpeech: "n./v.",
                example: "The old building shows signs of decay."
            },
            {
                english: "watertight",
                pronunciation: "/ˈwɔːtərˌtaɪt/",
                chinese: "不透水的",
                partOfSpeech: "adj.",
                example: "Make sure the container is watertight."
            },
            {
                english: "orthodox",
                pronunciation: "/ˈɔːrθəˌdɑːks/",
                chinese: "正统的",
                partOfSpeech: "adj.",
                example: "He follows orthodox religious practices."
            },
            {
                english: "realm",
                pronunciation: "/rɛlm/",
                chinese: "领域",
                partOfSpeech: "n.",
                example: "This discovery opens up a new realm of possibilities."
            },
            {
                english: "formulate",
                pronunciation: "/ˈfɔːrmjuˌleɪt/",
                chinese: "制定",
                partOfSpeech: "v.",
                example: "We need to formulate a new strategy."
            },
            {
                english: "layman",
                pronunciation: "/ˈleɪmən/",
                chinese: "外行",
                partOfSpeech: "n.",
                example: "Can you explain this in layman's terms?"
            },
            {
                english: "stainless",
                pronunciation: "/ˈsteɪnləs/",
                chinese: "不锈的",
                partOfSpeech: "adj.",
                example: "The kitchen has stainless steel appliances."
            },
            {
                english: "incompetence",
                pronunciation: "/ɪnˈkɑːmpətəns/",
                chinese: "无能",
                partOfSpeech: "n.",
                example: "His incompetence led to the project's failure."
            },
            {
                english: "accountability",
                pronunciation: "/əˌkaʊntəˈbɪləti/",
                chinese: "问责制",
                partOfSpeech: "n.",
                example: "There must be accountability for these mistakes."
            },
            {
                english: "petty",
                pronunciation: "/ˈpɛti/",
                chinese: "琐碎的",
                partOfSpeech: "adj.",
                example: "Don't waste time on petty arguments."
            },
            {
                english: "veto",
                pronunciation: "/ˈviːtoʊ/",
                chinese: "否决",
                partOfSpeech: "n./v.",
                example: "The president used his veto power."
            },
            {
                english: "refute",
                pronunciation: "/rɪˈfjuːt/",
                chinese: "反驳",
                partOfSpeech: "v.",
                example: "The scientist refuted the false claims."
            },
            {
                english: "hypothesis",
                pronunciation: "/haɪˈpɑːθəsɪs/",
                chinese: "假设",
                partOfSpeech: "n.",
                example: "The hypothesis needs to be tested."
            },
            {
                english: "hack",
                pronunciation: "/hæk/",
                chinese: "砍",
                partOfSpeech: "v./n.",
                example: "Someone tried to hack into the system."
            },
            {
                english: "stall",
                pronunciation: "/stɔːl/",
                chinese: "拖延",
                partOfSpeech: "v./n.",
                example: "Don't stall any longer; make a decision."
            },
            {
                english: "trigger",
                pronunciation: "/ˈtrɪɡər/",
                chinese: "触发",
                partOfSpeech: "n./v.",
                example: "This event could trigger a chain reaction."
            },
            {
                english: "hacker",
                pronunciation: "/ˈhækər/",
                chinese: "黑客",
                partOfSpeech: "n.",
                example: "The hacker broke into the company's database."
            }
        ];

        // 游戏状态
        let gameState = {
            currentWords: [],
            selectedEnglish: null,
            selectedChinese: null,
            matchedPairs: [],
            wrongAttempts: [],
            score: 0,
            correctCount: 0,
            wrongCount: 0,
            gameStartTime: null,
            timerInterval: null,
            gameActive: false
        };

        // 初始化游戏
        function initGame() {
            updateDisplay();
            loadLeaderboard();
        }

        // 开始新游戏
        function startNewGame() {
            // 重置游戏状态
            gameState = {
                currentWords: getRandomWords(10),
                selectedEnglish: null,
                selectedChinese: null,
                matchedPairs: [],
                wrongAttempts: [],
                score: 0,
                correctCount: 0,
                wrongCount: 0,
                gameStartTime: Date.now(),
                timerInterval: null,
                gameActive: true
            };

            // 开始计时器
            startTimer();
            
            // 渲染游戏板
            renderGameBoard();
            updateDisplay();
            updateProgress();
            
            // 隐藏排行榜
            document.getElementById('leaderboardSection').style.display = 'none';
        }

        // 获取随机单词
        function getRandomWords(count) {
            const shuffled = [...wordsDatabase].sort(() => 0.5 - Math.random());
            return shuffled.slice(0, count);
        }

        // 渲染游戏板
        function renderGameBoard() {
            const englishContainer = document.getElementById('englishWords');
            const chineseContainer = document.getElementById('chineseWords');
            
            // 清空容器
            englishContainer.innerHTML = '';
            chineseContainer.innerHTML = '';
            
            // 创建打乱的数组以随机排列
            const shuffledEnglish = [...gameState.currentWords].sort(() => 0.5 - Math.random());
            const shuffledChinese = [...gameState.currentWords].sort(() => 0.5 - Math.random());
            
            // 渲染英语单词
            shuffledEnglish.forEach((word, index) => {
                const wordElement = document.createElement('div');
                wordElement.className = 'word-item';
                wordElement.dataset.wordId = wordsDatabase.findIndex(w => w.english === word.english);
                wordElement.innerHTML = `
                    <div class="english-word">${word.english}</div>
                    <div class="pronunciation">${word.pronunciation}</div>
                `;
                wordElement.onclick = () => selectEnglishWord(wordElement);
                englishContainer.appendChild(wordElement);
            });
            
            // 渲染中文释义
            shuffledChinese.forEach((word, index) => {
                const wordElement = document.createElement('div');
                wordElement.className = 'word-item';
                wordElement.dataset.wordId = wordsDatabase.findIndex(w => w.english === word.english);
                wordElement.innerHTML = `
                    <div class="chinese-meaning">${word.chinese}</div>
                    <div class="part-of-speech">${word.partOfSpeech}</div>
                `;
                wordElement.onclick = () => selectChineseWord(wordElement);
                chineseContainer.appendChild(wordElement);
            });
        }

        // 选择英语单词
        function selectEnglishWord(element) {
            if (!gameState.gameActive || element.classList.contains('matched')) return;
            
            // 清除之前的选择
            document.querySelectorAll('#englishWords .word-item').forEach(el => {
                el.classList.remove('selected');
            });
            
            // 选择当前单词
            element.classList.add('selected');
            gameState.selectedEnglish = element;
            
            // 如果已选择中文，尝试匹配
            if (gameState.selectedChinese) {
                checkMatch();
            }
        }

        // 选择中文单词
        function selectChineseWord(element) {
            if (!gameState.gameActive || element.classList.contains('matched')) return;
            
            // 清除之前的选择
            document.querySelectorAll('#chineseWords .word-item').forEach(el => {
                el.classList.remove('selected');
            });
            
            // 选择当前单词
            element.classList.add('selected');
            gameState.selectedChinese = element;
            
            // 如果已选择英语，尝试匹配
            if (gameState.selectedEnglish) {
                checkMatch();
            }
        }

        // 检查匹配
        function checkMatch() {
            const englishId = gameState.selectedEnglish.dataset.wordId;
            const chineseId = gameState.selectedChinese.dataset.wordId;
            
            if (englishId === chineseId) {
                // 匹配成功
                gameState.selectedEnglish.classList.add('matched');
                gameState.selectedChinese.classList.add('matched');
                gameState.matchedPairs.push(englishId);
                gameState.correctCount++;
                gameState.score += 10;
                
                // 显示庆祝动画
                showCelebration('🎉');
                
                // 检查游戏是否完成
                if (gameState.matchedPairs.length === gameState.currentWords.length) {
                    setTimeout(() => endGame(), 500);
                }
            } else {
                // 匹配失败
                gameState.selectedEnglish.classList.add('wrong');
                gameState.selectedChinese.classList.add('wrong');
                gameState.wrongCount++;
                gameState.score = Math.max(0, gameState.score - 2);
                
                // 记录错误尝试
                const wrongWord = wordsDatabase[englishId];
                if (!gameState.wrongAttempts.find(w => w.english === wrongWord.english)) {
                    gameState.wrongAttempts.push(wrongWord);
                }
                
                // 显示错误动画
                showCelebration('❌');
                
                // 移除错误样式
                setTimeout(() => {
                    gameState.selectedEnglish.classList.remove('wrong');
                    gameState.selectedChinese.classList.remove('wrong');
                }, 500);
            }
            
            // 清除选择
            gameState.selectedEnglish.classList.remove('selected');
            gameState.selectedChinese.classList.remove('selected');
            gameState.selectedEnglish = null;
            gameState.selectedChinese = null;
            
            // 更新显示
            updateDisplay();
            updateProgress();
        }

        // 显示庆祝动画
        function showCelebration(emoji) {
            const celebration = document.createElement('div');
            celebration.className = 'celebration';
            celebration.textContent = emoji;
            document.body.appendChild(celebration);
            
            setTimeout(() => {
                document.body.removeChild(celebration);
            }, 1000);
        }

        // 更新显示
        function updateDisplay() {
            document.getElementById('score').textContent = gameState.score;
            document.getElementById('correct').textContent = gameState.correctCount;
            document.getElementById('wrong').textContent = gameState.wrongCount;
        }

        // 更新进度条
        function updateProgress() {
            const progress = (gameState.matchedPairs.length / gameState.currentWords.length) * 100;
            document.getElementById('progressBar').style.width = progress + '%';
        }

        // 开始计时器
        function startTimer() {
            if (gameState.timerInterval) {
                clearInterval(gameState.timerInterval);
            }
            
            gameState.timerInterval = setInterval(() => {
                if (!gameState.gameActive) return;
                
                const elapsed = Math.floor((Date.now() - gameState.gameStartTime) / 1000);
                const minutes = Math.floor(elapsed / 60);
                const seconds = elapsed % 60;
                document.getElementById('timer').textContent = 
                    `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
            }, 1000);
        }

        // 停止计时器
        function stopTimer() {
            if (gameState.timerInterval) {
                clearInterval(gameState.timerInterval);
                gameState.timerInterval = null;
            }
        }

        // 结束游戏
        function endGame() {
            gameState.gameActive = false;
            stopTimer();
            
            const gameTime = Math.floor((Date.now() - gameState.gameStartTime) / 1000);
            const accuracy = Math.round((gameState.correctCount / (gameState.correctCount + gameState.wrongCount)) * 100) || 0;
            
            // 计算最终得分
            const timeBonus = Math.max(0, 300 - gameTime); // 时间奖励
            const accuracyBonus = Math.floor(accuracy * 0.5); // 准确率奖励
            const finalScore = gameState.score + timeBonus + accuracyBonus;
            
            // 保存成绩
            saveScore(finalScore, gameTime, accuracy);
            
            // 显示游戏结束对话框
            showGameOverModal(finalScore, gameTime, accuracy);
        }

        // 显示游戏结束模态框
        function showGameOverModal(finalScore, gameTime, accuracy) {
            const modal = document.getElementById('gameOverModal');
            const content = document.getElementById('gameOverContent');
            
            const minutes = Math.floor(gameTime / 60);
            const seconds = gameTime % 60;
            
            content.innerHTML = `
                <div style="text-align: center; margin-bottom: 20px;">
                    <div style="font-size: 3rem; margin-bottom: 10px;">🎉</div>
                    <div style="font-size: 1.5rem; color: #28a745; margin-bottom: 20px;">恭喜完成游戏！</div>
                </div>
                
                <div style="background: #f8f9fa; padding: 20px; border-radius: 10px; margin-bottom: 20px;">
                    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; text-align: center;">
                        <div>
                            <div style="font-size: 1.2rem; color: #666;">最终得分</div>
                            <div style="font-size: 2rem; color: #ff6b6b; font-weight: bold;">${finalScore}</div>
                        </div>
                        <div>
                            <div style="font-size: 1.2rem; color: #666;">用时</div>
                            <div style="font-size: 2rem; color: #4ecdc4; font-weight: bold;">
                                ${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}
                            </div>
                        </div>
                        <div>
                            <div style="font-size: 1.2rem; color: #666;">正确率</div>
                            <div style="font-size: 2rem; color: #28a745; font-weight: bold;">${accuracy}%</div>
                        </div>
                        <div>
                            <div style="font-size: 1.2rem; color: #666;">错误单词</div>
                            <div style="font-size: 2rem; color: #dc3545; font-weight: bold;">${gameState.wrongAttempts.length}</div>
                        </div>
                    </div>
                </div>
                
                <div style="text-align: center;">
                    <button class="btn btn-primary" onclick="startNewGame(); closeModal();" style="margin-right: 10px;">
                        🚀 再玩一次
                    </button>
                    <button class="btn btn-secondary" onclick="showWrongWords(); closeModal();">
                        📚 查看错题
                    </button>
                </div>
            `;
            
            modal.style.display = 'block';
        }

        // 保存成绩
        function saveScore(score, time, accuracy) {
            let scores = JSON.parse(localStorage.getItem('wordGameScores') || '[]');
            scores.push({
                score: score,
                time: time,
                accuracy: accuracy,
                date: new Date().toLocaleDateString(),
                wrongCount: gameState.wrongAttempts.length
            });
            
            // 只保留最好的10个成绩
            scores.sort((a, b) => b.score - a.score);
            scores = scores.slice(0, 10);
            
            localStorage.setItem('wordGameScores', JSON.stringify(scores));
        }

        // 显示排行榜
        function showLeaderboard() {
            const section = document.getElementById('leaderboardSection');
            const list = document.getElementById('leaderboardList');
            
            const scores = JSON.parse(localStorage.getItem('wordGameScores') || '[]');
            
            if (scores.length === 0) {
                list.innerHTML = '<div style="text-align: center; color: #666;">暂无游戏记录</div>';
            } else {
                list.innerHTML = scores.map((score, index) => `
                    <div class="score-item">
                        <div>
                            <span style="color: ${index < 3 ? ['#ffd700', '#c0c0c0', '#cd7f32'][index] : '#666'};">
                                ${index + 1}. 
                            </span>
                            ${score.date}
                        </div>
                        <div>
                            <strong>${score.score}分</strong> 
                            (${Math.floor(score.time/60)}:${(score.time%60).toString().padStart(2,'0')}, 
                            ${score.accuracy}%)
                        </div>
                    </div>
                `).join('');
            }
            
            section.style.display = 'block';
        }

        // 加载排行榜
        function loadLeaderboard() {
            // 页面加载时不显示排行榜，只在用户点击时显示
        }

        // 显示错题回顾
        function showWrongWords() {
            const modal = document.getElementById('wrongWordsModal');
            const list = document.getElementById('wrongWordsList');
            
            if (gameState.wrongAttempts.length === 0) {
                list.innerHTML = `
                    <div style="text-align: center; padding: 20px;">
                        <div style="font-size: 3rem; margin-bottom: 10px;">🎉</div>
                        <div style="font-size: 1.2rem; color: #28a745;">太棒了！没有错误的单词！</div>
                    </div>
                `;
            } else {
                list.innerHTML = gameState.wrongAttempts.map(word => `
                    <div class="wrong-word">
                        <div class="wrong-word-header">
                            ${word.english} ${word.pronunciation}
                        </div>
                        <div style="margin: 8px 0;">
                            <strong>中文释义：</strong>${word.chinese} (${word.partOfSpeech})
                        </div>
                        <div class="example-sentence">
                            <strong>例句：</strong>${word.example}
                        </div>
                    </div>
                `).join('');
            }
            
            modal.style.display = 'block';
        }

        // 关闭模态框
        function closeModal() {
            document.getElementById('wrongWordsModal').style.display = 'none';
            document.getElementById('gameOverModal').style.display = 'none';
        }

        // 点击模态框外部关闭
        window.onclick = function(event) {
            const wrongModal = document.getElementById('wrongWordsModal');
            const gameOverModal = document.getElementById('gameOverModal');
            if (event.target === wrongModal) {
                wrongModal.style.display = 'none';
            }
            if (event.target === gameOverModal) {
                gameOverModal.style.display = 'none';
            }
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', initGame);